import { Tag, Input, Tooltip } from 'antd';
import { PlusOutlined } from '@ant-design/icons';
import { useEffect, useState } from 'react';
import { getArticle } from '../../services/api';

interface Props {
    getTags?: (tags: string[]) => void,
    id?: string
}
export default function Tags(props: Props) {
    const [tags, setTags] = useState<string[]>([]);
    const [inputVisible, setInputVisible] = useState(false);
    const [inputValue, setInputValue] = useState('')
    const [editInputIndex, setEditInputIndex] = useState(-1)
    const [editInputValue, setEditInputValue] = useState('')
    const [creatTag, setCreatTag] = useState(true) //用于控制标签数量，最多四个标签
    //初始化
    useEffect(() => {
        if (props.id)
            getArticle(props.id).then((res) => {
                if (res.data) {
                    setTags(res.data.info.tags.split(','))
                }
            })
    }, [props.id])
    useEffect(() => {
        if (props.getTags)
            props.getTags(tags)
        if (tags.length < 4) setCreatTag(true)
        else setCreatTag(false)
    }, [tags])// eslint-disable-line

    const handleClose = (removedTag: string) => {
        let tagtemp = tags.filter(tag => tag !== removedTag);
        setTags(tagtemp)
    };

    const showInput = () => {
        setInputVisible(true)
    };
    const handleInputConfirm = () => {
        if (inputValue && tags.indexOf(inputValue) === -1) {
            setTags(tags.concat(inputValue))
        }
        setInputValue('')
        setInputVisible(false)
        setCreatTag(true)
    };

    const handleEditInputConfirm = () => {
        const newTags = [...tags];
        newTags[editInputIndex] = editInputValue;
        setTags(newTags);
        console.log(tags);
        setEditInputIndex(-1)
        setEditInputValue('')
    };

    return (
        <>
            {tags.map((tag, index) => {
                if (editInputIndex === index) {
                    return (
                        <Input
                            key={tag}
                            maxLength={10}
                            size="small"
                            className="tag-input"
                            value={editInputValue}
                            onChange={e => setEditInputValue(e.target.value)}
                            onBlur={handleEditInputConfirm}
                            onPressEnter={handleEditInputConfirm}
                        />
                    );
                }
                let isLongTag = tag.length > 5;
                const tagElem = (
                    <Tag
                        className="edit-tag"
                        key={tag}
                        closable={true}
                        onClose={() => handleClose(tag)}
                    >
                        <span
                            onDoubleClick={e => {
                                if (index) {
                                    setEditInputIndex(index);
                                    setEditInputValue(tag)
                                    e.preventDefault();
                                }
                            }}
                        >
                            {isLongTag ? `${tag.slice(0, 5)}...` : tag}
                        </span>
                    </Tag>
                );
                return isLongTag ? (
                    <Tooltip title={tag} key={tag}>
                        {tagElem}
                    </Tooltip>
                ) : (
                    tagElem
                );
            })}
            {inputVisible && creatTag && (
                <Input
                    type="text"
                    size="small"
                    maxLength={10}
                    className="tag-input"
                    value={inputValue}
                    onChange={e => setInputValue(e.target.value)}
                    onBlur={handleInputConfirm}
                    onPressEnter={handleInputConfirm}
                />
            )}
            {!inputVisible && creatTag && (
                <Tag className="site-tag-plus" onClick={showInput}>
                    <PlusOutlined /> New Tag
                </Tag>
            )}
        </>
    )
}